Angular Material-এ Data Table একটি অত্যন্ত জনপ্রিয় কম্পোনেন্ট যা বড় আকারের ডেটা ডিসপ্লে করার জন্য ব্যবহৃত হয়। এটি খুবই কাস্টমাইজেবল এবং ব্যবহারযোগ্য, যেখানে pagination, sorting, filtering, এবং responsive design সহ আরও অনেক সুবিধা পাওয়া যায়। Angular Material Data Table ব্যবহার করে আপনি খুব সহজেই আপনার অ্যাপ্লিকেশনে একটি ডাইনামিক এবং ফিচার-প্যাকড টেবিল তৈরি করতে পারবেন।
Angular Material Data Table ব্যবহারের জন্য, প্রথমে আপনাকে Angular Material ইনস্টল করতে হবে এবং প্রয়োজনীয় মডিউলগুলো ইম্পোর্ট করতে হবে।
Angular CLI ব্যবহার করে Angular Material ইনস্টল করতে:
ng add @angular/material
এটি আপনাকে প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করার সাথে সাথে একটি থিমও নির্বাচন করতে বলবে।
Angular Material Data Table ব্যবহারের জন্য, আপনাকে MatTableModule, MatPaginatorModule, MatSortModule ইত্যাদি মডিউলগুলো ইম্পোর্ট করতে হবে।
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatInputModule } from '@angular/material/input'; // Filter functionality জন্য
@NgModule({
imports: [
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatInputModule
]
})
export class AppModule { }
এখন Angular Material Data Table ব্যবহার করার জন্য আপনাকে একটি টেবিল তৈরি করতে হবে এবং ডেটা সোর্সের সাথে এটি যুক্ত করতে হবে।
ধরা যাক, আপনি একটি UsersComponent তৈরি করছেন যেখানে ব্যবহারকারীদের একটি লিস্ট টেবিল আকারে দেখানো হবে।
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
export interface User {
id: number;
name: string;
email: string;
}
const USERS_DATA: User[] = [
{id: 1, name: 'John Doe', email: 'john@example.com'},
{id: 2, name: 'Jane Smith', email: 'jane@example.com'},
{id: 3, name: 'Mary Johnson', email: 'mary@example.com'},
// আরও ডেটা
];
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
displayedColumns: string[] = ['id', 'name', 'email'];
dataSource = new MatTableDataSource(USERS_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator | undefined;
@ViewChild(MatSort) sort: MatSort | undefined;
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
এখন, users.component.html ফাইলে টেবিলটি তৈরি করুন এবং Angular Material এর কম্পোনেন্টগুলো ব্যবহার করুন:
<div class="mat-elevation-z8">
<mat-form-field>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Email Column -->
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
<td mat-cell *matCellDef="let element"> {{element.email}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>
এখানে:
matTable ডিরেক্টিভের মাধ্যমে টেবিলটি তৈরি করা হয়েছে।matColumnDef ব্যবহার করে প্রতিটি কলামের জন্য ডেফিনিশন তৈরি করা হয়েছে (যেমন, ID, Name, Email)।matSort সোর্টিং ফিচার যোগ করা হয়েছে, যাতে ব্যবহারকারী কলাম হেডারের উপর ক্লিক করে সorting করতে পারে।mat-paginator দিয়ে পেজিনেশন যোগ করা হয়েছে যাতে ব্যবহারকারী ডেটা পেজ বাই পেজ দেখতে পারে।আপনি যেকোনো কলামে সোর্টিং করতে পারেন। Angular Material mat-sort-header ডিরেক্টিভের মাধ্যমে সোর্টিং সক্ষম করা হয়েছে।
পেজিনেশন দ্বারা আপনি টেবিলের ডেটাকে বিভিন্ন পেজে ভাগ করে ব্যবহারকারীর সুবিধার্থে দেখাতে পারেন। mat-paginator এর মাধ্যমে আপনি পেজ সাইজ এবং পেজ নেভিগেশন কন্ট্রোল করতে পারেন।
Filter ফিচার ব্যবহার করে ব্যবহারকারী টেবিলের ডেটার মধ্যে কিওয়ার্ডের মাধ্যমে অনুসন্ধান করতে পারে। applyFilter মেথডে ফিল্টারিং লজিক যুক্ত করা হয়।
Angular Material Data Table একটি খুবই শক্তিশালী টুল যা Angular অ্যাপ্লিকেশনে ডাইনামিক এবং ইন্টারঅ্যাকটিভ টেবিল তৈরি করতে ব্যবহৃত হয়। এটি sorting, pagination, এবং filtering ফিচারসমূহ সরবরাহ করে যা ইউজার ইন্টারফেসকে আরও উন্নত এবং ব্যবহারযোগ্য করে তোলে। Angular Material এর সাহায্যে Data Table তৈরি করা অনেক সহজ এবং কাস্টমাইজ করা যায়।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
